<!--  -->
<template>
  <div class="login">
    <div class="login-content">
      <div class="left">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="@/assets/images/01.jpg" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <div class="title">好谷家人后台管理系统</div>
        <el-form :model="userInfo" status-icon :rules="loginRules" ref="login">
          <el-form-item label="" prop="username">
            <el-input
              v-model="userInfo.username"
              placeholder="手机号/邮箱"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              v-model="userInfo.password"
              placeholder="密码"
              clearable
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="" class="captcha">
            <el-input
              v-model="userInfo.captcha"
              placeholder="验证码"
              clearable
            ></el-input>
            <img
              src="http://localhost:3000/admin/user/captcha"
              ref="captcha"
              alt=""
              @click="changeCaptcha"
            />
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              style="width: 100%"
              @click="submitForm('login')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tools from "@/utils/tools.js";
import { UserLoginApi } from "@/api/user.js";
import { setCookie } from "@/utils/auth.js";
// console.log(tools);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //ComponentName和文件名保持一致
  name: "ComponentName",
  data() {
    // 自定义校验规则
    var validateUserName = (rule, value, callback) => {
      if (value === "") {
        // value 指的是用户输入的数据
        callback(new Error("用户名不能为空"));
      } else {
        if (!(tools.regPhone.test(value) || tools.regEmail.test(value))) {
          callback(new Error("用户名格式不正确"));
        }
        callback();
      }
    };
    //这里存放数据
    return {
      userInfo: {
        username: "13673618137",
        password: "123456",
        captcha: "",
      },
      loginRules: {
        username: [{ validator: validateUserName, trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击验证码图片,执行的事件
    changeCaptcha() {
      console.log(this.$refs.captcha);
      this.$refs.captcha.src =
        "http://localhost:3000/admin/user/captcha?time=" + Date.now();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(valid); //true/false
          // // alert("submit!");
          //
          UserLoginApi(this.userInfo).then((result) => {
            console.log(result);
            if (result.data.status == 200) {
              setCookie("token", result.data.token);
              this.$router.push("/admin");
            } else {
              this.$message({
                message: result.data.msg,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  deactivated() {}, //如果页面有keep-alive缓存功能，当组件被移除时，触发钩子函数deactivated
};
</script>
<style lang="less">
.login {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("../../assets/images/bg.jpg");
  background-size: cover;
  .login-content {
    width: 800px;
    height: 400px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 50%;
    margin-top: -200px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      width: 400px;
      height: 400px;
      img {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }
    }
    .right {
      width: 350px;
      height: 400px;
      padding: 0 25px;
      .title {
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 24px;
        font-weight: bold;
      }
      .captcha {
        .el-form-item__content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            height: 40px;
          }
        }
      }
    }
  }
}
</style>